
import { ref, markRaw, reactive } from 'vue'
import { setData } from 'el-plus-powerful-table-ts/es'
import { Edit, Remove, Connection } from '@element-plus/icons-vue'
import type { PowerfulTableHeader } from 'el-plus-powerful-table-ts'

export type Model = {
  carName: string
  carUuid: string
  plateNumber: string
  vin: string
  engineNumber: string
  modelUuid: string
  driverUuid: string
  seriesUuid: string
  brandUuid: string
  modelType: number
  energyType: number
  // createTime: number
  // creatorName: string
  // updateName: string
  // updateTime: number
}

interface PowerfulTableData {
  list: Model[]
  header: any[]
  total: number
  listQuery: {
    pageNum: number
    pageSize: number
    plateNumber: string
    vin: string
  }
}

export const defaultData = () => ({
  carName: '',
  carUuid: '',
  // createTime: 0,
  // creatorName: '',
  // updateName: '',
  // updateTime: 0,
  plateNumber: '',
  vin: '',
  engineNumber: '',
  modelUuid: '',
  seriesUuid: '',
  brandUuid: '',
  modelType: 0,
  energyType: 0,
  driverUuid: '',
})

export const useData = <Row = any>() => {
  const header: PowerfulTableHeader<Row>[] = [
    {
      label: '车架号（vin）', //显示的名称
      overflowTooltip: true,
      width: 200,
      headerAlign: 'left',
      props: [
        {
          prop: 'vin',
        },
      ],
    },
    {
      label: '车牌号', //显示的名称
      overflowTooltip: true,
      headerAlign: 'left',
      props: [
        {
          prop: 'plateNumber',
        },
      ],
    },
    {
      label: '车辆状态', //显示的名称
      headerAlign: 'left',
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'carState',
        },
      ],
    },
    {
      label: '车辆所属方', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'carOwnerName',
        },
      ],
    },
    {
      label: '品牌', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'brandName',
        },
      ],
    },
    {
      label: '车系', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'seriesName',
        },
      ],
    },
    {
      label: '车型', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'modelName',
        },
      ],
    },
    {
      label: '添加时间', //显示的名称
      headerAlign: 'left',
      width: 180,
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'createTime',
        },
      ],
    },
    {
      label: '更新时间', //显示的名称
      headerAlign: 'left',
      width: 180,
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'updateTime',
        },
      ],
    },
    {
      label: '创建人', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'creatorName',
        },
      ],
    },
    {
      label: '操作', //显示的标题
      headerAlign: 'left',
      minWidth: '260px',
      fixed: 'right',
      props: [
        {
          type: 'btn',
          prop: '',
          data: setData<'btn'>([
            {
              text: '绑定司机',
              params: 'bindDriver',
              showBtn: (row: any) => {
                return row.carState === 10
              },
              property: {
                type: 'primary',
                size: "small",
                plain: true,
                icon: markRaw(Connection),
              },
            },
            {
              text: '解绑司机',
              params: 'unbindDriver',
              showBtn: (row: any) => {
                return row.carState != 10
              },
              property: {
                type: 'warning',
                size: "small",
                icon: markRaw(Connection),
              },
            },
            {
              text: '编辑',
              params: 'edit',
              property: {
                type: 'primary',
                size: "small",
                icon: markRaw(Edit),
              },
            },
            {
              text: '删除',
              params: 'remove',
              property: {
                type: 'danger',
                size: "small",
                icon: markRaw(Remove),
              },
            },
          ]),
        },
      ],
    },
  ]
  // 编辑区显隐
  const isDialog = ref(false)

  // 弹窗开关
  const switchs = reactive({
    role: false,
    edit: false,
  })

  const powerfulTableData: PowerfulTableData = reactive({
    list: [],
    header: header,
    total: 0,
    listQuery: {
      pageNum: 1,
      pageSize: 10,
      plateNumber: '',
      vin: '',
    },
  })


  // row 数据
  const currentForm = ref<Model>(defaultData())

  // 车辆列表
  const listData = ref<{ label: string; value: string }[]>([])

  return {
    header,
    switchs,
    isDialog,
    powerfulTableData,
    currentForm,
    listData,
  }
}
